<template>
    <div>
      <!-- 没有图片 -->
      <van-cell
        :title="articleInfo.title"
        v-if="type === 0"
        :label="label"
        @click="getDetail(articleInfo)"
      />
      <!-- 一张图片 -->
      <van-cell
        :title="articleInfo.title"
        v-else-if="type === 1"
        :label="label"
        @click="getDetail(articleInfo)"
      >
        <van-image width="100" height="100" :src="articleInfo.cover.images[0]" />
      </van-cell>
  
      <!-- 三张图片 -->
      <van-cell :title="articleInfo.title" v-else @click="getDetail(articleInfo)">
        <!-- 图片 -->
        <template #label>
          <van-image
            width="100"
            height="100"
            v-for="(item, index) in articleInfo.cover?.images"
            :key="index"
            :src="item"
          />
          <!-- 文字 -->
          <span>{{ label }}</span>
        </template>
      </van-cell>
    </div>
  </template>
  
  <script>
  import dayjs from '@/utils/dayjs'
  export default {
    props: {
      articleInfo: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {}
    },
    computed: {
      type() {
        return this.articleInfo.cover?.type
      },
      label() {
        const { aut_name, comm_count, pubdate } = this.articleInfo
        return `${aut_name} ${comm_count}评论 ${dayjs(pubdate).fromNow()}`
      }
    },
    methods: {
      async getDetail(a) {
        this.$router.push({
          path: '/detail',
          query: {
            id: a.art_id
          }
        })
      }
    }
  }
  </script>
  
  <style></style>